<template>
    <div class="img-container">
        <h3 class="title">{{imageinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{imageinfo.add_time |dateFormat}}</span>
            <span>点击:{{imageinfo.click}}次</span>
        </p>
        <hr>
        <vue-preview :slides="slidelist" class="slides"></vue-preview>
        <div class="content" v-html="imageinfo.content"></div>
         <Comment :id="this.imgid"></Comment> 
    </div>
</template>
<script>
    import Comment from '@/components/subcomponents/Comment'
    import {Toast} from 'mint-ui'
    import common from '../../common/common.js'
    export default {
        data(){
            return {
                imageinfo:{},
                imgid:this.$route.params.id,
                slidelist: [
                        {
                            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                            alt: 'picture2',
                            title: 'Image Caption 2',
                            w: 600,
                            h: 400
                        },
                         {
                            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                            alt: 'picture1',
                            title: 'Image Caption 1',
                            w: 600,
                            h: 400
                        },
                        {
                            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                            alt: 'picture2',
                            title: 'Image Caption 2',
                            w: 600,
                            h: 400
                        }   ],
                        // imgpath:'http://ofv795nmp.bkt.clouddn.com/'
            }
        },
        created(){
            this.getimageInfo()
            this.getthumimages()
        },
        methods:{
            getimageInfo(){
                this.$http.get('api/getimageInfo/'+this.imgid).then(result=>{
                    if(result.body.status===0){
                        console.log(result.body)
                        this.imageinfo = result.body.message[0]
                    }else{
                        Toast('加载失败，请重试')
                    }
                })
            },
            getthumimages(){
                this.$http.get('api/getthumimages/'+this.imgid).then(result=>{
                    if(result.body.status===0){
                        console.log(result.body)
                        result.body.message.forEach(item=>{
                            item.src=common.imghost+item.src
                            item.w=600
                            item.h=400
                        })
                        this.slidelist = result.body.message
                    }else{
                        Toast('加载失败，请重试')
                    }
                })
            }
        },
        components:{
            Comment
        }
            
        
    }


</script>
<style lang="scss" scoped>
      .img-container{
        padding: 0 4px; 
      
       
        .title{ 
            color: #26a2ff;
            font-size: 15px; 
            text-align: center;
            margin: 15px 0;
            
            }
        .subtitle{
            font-size: 13px;
            color: #226aff;
            display: flex;
            justify-content:space-between;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
            img{
                width: 100%;
            }
        }
        .slides{
            text-align: center;
            width: 200px;
            a{
                width: 50px;
                 img{
                    margin: 10px;                
                    box-shadow: 0 0 8px #999;
                    }
            }
           
            }

            
    }


</style>